/**
 * 表单组件 json
 */
import {
    watch,
    h,
    ref
} from 'vue'
export default {
    props: {
        data: {
            type: Array,
            default: []
        },
        formData: {
            type: Object,
            default: {}
        },
        calss:{
            type:String,
            default:''
        }
    },
    setup(props, { emit, attrs }) {
        /* form表单验证 */
        const handlerRule = (data) => {
            let rules = {}
            data.forEach(item => {
                if(Object.keys(item.rule).length){
                    rules[item.id] = [item.rule]
                    return
                }
            })
            return rules
        }
        return () => {
            return h(<el-form />, { model: props.formData, rules: handlerRule(props.data), 'validate-on-rule-change': false ,"label-width":'120px',class:props.class}, {
                default: () => {
                    return props.data.map(item => {
                        return h(<el-form-item />, { label: item.title, prop: item.id }, {
                            default: () => {
                                if (item.type === 'input') {
                                    return h(<el-input />, {
                                        ...item,
                                        'model-value': props.formData[item.id],
                                        class:['myForm',item.class],
                                        type: item.otherType,
                                        onInput: (value) => {
                                            emit('valueChange', item.id, value)
                                        },
                                    })
                                } else if (item.type === 'select') {
                                    return h(<el-select />, {
                                        ...item,
                                        'model-value': props.formData[item.id],
                                        class:['myForm',item.class],
                                        onChange: (value) => {
                                            emit('valueChange', item.id, value)
                                        },
                                    },
                                        {
                                            default: () => {
                                                return item?.option && item.option.map(o => {
                                                    return h(<el-option></el-option>, {
                                                        label: o.label,
                                                        value: o.value,
                                                        key: o.value,
                                                        disabled: o.disabled
                                                    })
                                                })
                                            }
                                        })
                                }
                            }
                        })
                    })
                }
            })
        }
    }
}